const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

function init() {
  canvas.width = window.innerWidth * window.devicePixelRatio
  canvas.height = window.innerHeight * window.devicePixelRatio
}

init()

const fontSize = 20 * devicePixelRatio

ctx.font = `${fontSize}px "Roboto Mono"`

const columnCount = Math.floor(window.innerWidth / fontSize)
const chartIndex = new Array(columnCount).fill(0)

function draw() {
  ctx.fillStyle = 'rgba(0,0,0,0.2)'
  ctx.fillRect(0,0,canvas.width, canvas.height)
  ctx.fillStyle = '#fff'
  ctx.textBaseline = 'top'
  for (let i = 0; i < columnCount; i++) {
    const text = getRandomStr()
    const x= fontSize * i, y = fontSize * chartIndex[i]
    ctx.fillText(text, x, y)
    if (y > canvas.height && Math.random() > 0.95) {
      chartIndex[i] = 0
    } else {
      chartIndex[i]++
    }
  }
}

setInterval(() => {
  draw()
}, 100)